<template>
  <div>
    <headers></headers>
    <router-view></router-view>
    <bottoms :config="webConfig"></bottoms>
  </div>
</template>
<script>
import headers from "/components/headers.vue";
import bottoms from "/components/bottoms.vue";
import { get } from "@/utils/request";
import { useConfigStore } from '@/store/config';

export default {
  name: "App",
  components: { headers, bottoms },
  data() {
    return {
      // 保留data中的webConfig以备兼容使用
      webConfig: {}
    };
  },
  created() {
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    console.log(isMobile)
    if (isMobile) {
      // 如果是手机 那么跳转到手机端
      // window.location.href = "http://www.kdxwindowfilm.com/H5/index.html"
    } else {
      console.log("当前是PC端访问");
    }
  },
  methods: {
    async getWebconfig() {
      try {
        const res = await get('/setting/getAll');
        if (res.code === 200) {
          // 更新本地data
          this.webConfig = res.data;
          // 更新localStorage
          localStorage.setItem('webConfig', JSON.stringify(res.data));
          // 更新Pinia store
          const configStore = useConfigStore();
          configStore.setWebConfig(res.data);
          
          // 动态设置网页标题
          document.title = res.data.site_name || '默认标题';
        }
      } catch (error) {
        console.error('获取网站配置失败:', error);
        document.title = '上海康得新晨诺光学材料有限公司';
      }
    },
  },
  mounted() {
    this.getWebconfig();
  },
  watch: {
    $route() {
      const configStore = useConfigStore();
      if (configStore.webConfig.site_name) {
        document.title = configStore.webConfig.site_name;
      }
    }
  }
};
</script>
<style lang="less">
/* 保持原有样式不变 */
a {
  text-decoration: none;
}

#app {
  overflow: hidden;
  width: 100vw;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;

  /* IE和Edge */
  .highcharts-credits {
    display: none;
  }
}

:root {
  --scale: 1;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
}

* {
  font-family: "Microsoft YaHei", sans-serif;
  outline: none;

  -webkit-tap-highlight-color: transparent;
  /* 移除移动端点击高亮 */
  user-select: none;
  /* 禁止文本选中 */
  outline: none;
  /* 移除焦点轮廓 */
}

.scalable-page {
  transform-origin: 0 0;
  width: 1920px;
  height: 1080px;
  box-sizing: border-box;
  position: relative;
  left: 50%;
  transform: scale(var(--scale)) translateX(-50%);
}

.box {
  width: 300px;
  height: 200px;
  background: #e74c3c;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

html {
  scroll-behavior: smooth;
}

.scroll-transition {
  transition: scroll-top 1s ease-in-out;
}
</style>